<template>
  <div class="map full">
    <div :id="sid" class="full"></div>
  </div>
</template>

<script>
import mapDraw from './draw/DrawHmap.js' // 地图初始化 和 图层渲染 mixin    DrawAmap/DrawHmap/DrawHmap2.3
import { random14 } from '@/util/utils.js'
export default {
  mixins: [
    // websocket, // 事件WS
    mapDraw // 地图初始化 和 图层渲染
  ],
  data() {
    const sid = 'map_' + random14()
    return {
      sid: sid,
      map: null,
      mapConfig: {
        center: [
          113.228348,
          25.865742,
          0
        ],
        mapUrl: 'https://hmap.hikvision.com.cn/hmappublish/service/rs/v1/raster_tile/tms/hmap_hunan_chenzhou'
      }
    }
  },
  mounted() {
    this.mapInit(this.sid, {
      zoom: 13,
      maxLevel: 20,
      minLevel: 1,
      zoomInterval: 1, //地图级别改变一级时，需要滚轮滚动的次数
      // pitch:60,
      crs: new hmap.proj.Crs('4326'),
      center: new hmap.basetype.Coordinate(...this.mapConfig.center),
      callback: this.initTmsLayers
    })
  },
  methods: {
    mapReadyHandler(val) {
      if (this.mapIsReady) {
        this.drawDataHandler(val)
      } else {
        setTimeout(() => {
          console.log('mapReadyHandler setTimeout excute')
          this.mapReadyHandler(val)
        }, 500)
      }
    },
    // ********** 图层渲染 **********
    /**
     * @summary 地图渲染数据处理器
     * @param {Object} data {clearLevel: 0, list: [{type: '001010', list: [...]}, {}, ...]
     * @param {Number|Array} clearLevel 清除级别 ，默认2 see MAP_DEFAULT_LEVEL
     *    Number -> 清除详情窗口
     *    0不清除
     *    1清除级别1的，主要用于如企业周围点位展示等
     *    2清除级别1和2的，默认清除级别，如企业分布，切换分类需要清除的
     *    3清除级别1、2和3的，主要用于如城市安全交警单位等，切换分类不需要清除的
     *    100清除所有，主要用于如 切换板块等
     *    Array
     *    clearLevel[0]覆盖物清除级别  clearLevel[1]是否清除详情窗口
     *    e.g. 只清除详情窗口: [0, true]
     * @param {Array} data.list 资源组 [{type: '001010', list: [...]}, {}, ...]
     * @param {String} data.list[n].type 数据类型
     *    '000001' 标记详情窗口
     *    '000010' 标记marker
     *    '000020' 多边形
     *    '000030' 折线
     *    '001010' 聚合
     *    '002010' 热力图
     * @param {String} data.list[n].component 组件
     * @param {Number} data.list[n].level 级别 1/2/3
     * @param {Array} data.list[n].list 渲染的资源LIST  标记 多边形等
     * @param {Object} data.list[n].data 渲染的资源 详情等
     * @param {Number} data.list[n].move 移动，重新定位中心点  移动的X/Y轴偏移变量
     * */
    drawDataHandler(data) {
      // console.log('>>>>>>>>>> drawDataHandler：', data)
      this.mapClear(data.clearLevel)
      if (!data.list || data.list.length <= 0) { return false }
      for (let index = 0; index < data.list.length; index++) {
        const obj = data.list[index]
        switch (obj.type) {
          case '000001': // 地图标记详情窗口
            this.mapMarkerDetail(obj)
            break
          case '000010': // 地图标记marker
            this.mapMarkers(obj)
            break
          case '000011': // 地图标记marker only for hmap
            this.mapMarkersOverlay(obj)
            break
          case '000020': // 地图多边形
            this.mapPolygons(obj)
            break
          case '000030': // 地图折线
            this.mapPolylines(obj)
            break
          case '000050': // s3m-三维地图
            this.mapS3M(obj)
            break
          case '001010': // 聚合
            this.mapLayerCluster(obj)
            break
          case '002010': // 热力图
            this.mapHeatmap(obj)
            break
          case '501010': // 获取地图信息
            this.getExtentInfo(obj.callback)
            break
          case '505050':
            // 指定位置居中[0, 0.5]
            this.mapSetCenter(obj)
            break
        }
      }
    },

    /**
     * @summary 地图事件 数据处理
     * @param {Object} data
     * @param {String} data.type 数据类型 000001
     * @param {String} data.eventType click/mouseover
     * @param {Object} data.data 扩展数据/对象
     * @param {Array} data.lnglat 点击位置的经纬度
     * */
    eventDataHandler(data) {
      // console.log('>>>>>>>>>> map eventDataHandler：', data)
      this.$storeCommit('ME', data)
    },

    // ZOOM变化
    zoomChanged(val) {
      // this.$storeCommit('MZ', val)
    },

    // 事件WS
    wsMsgHandler(data) {
      this.$storeCommit('WS', data)
    },
    initTmsLayers(mapInstance) {
      this.map = mapInstance
      this.$emit('init', mapInstance)
      // 回调函数，地图初始化之后调用
      this.map.setDepthMode(1)
      // initControls(map)
      // 添加TMS图层，spiritMapUrl为tms服务的地址，如：https://10.19.124.59/hmappublish/service/rs/v1/raster_tile/tms/hmapjs_spirit_map
      const spiritMapUrl = this.mapConfig.mapUrl
      let tileLayer = new hmap.layer.TMSLayer('TMS图层', spiritMapUrl, {
        matrixOrigin: new hmap.basetype.Coordinate(-180, 90), //瓦片原点
        dataFormat: 'png', //瓦片数据格式
        useLocalStorage: true, //是否使用本地存储。设置为true则请求过的数据会在浏览器空闲时写入indexDB，建议网络不佳时设置。
      })
      this.map.addLayer(tileLayer, 0) //添加TMS图层并将图层z-index设置为0
    }
  }
}
</script>

<style scoped lang="scss"></style>